<script setup lang="ts">
import * as echarts from "echarts"
import { ref, onMounted, watch } from "vue"
import china from "@/utils/china.json"
// type EChartsOption = echarts.EChartsOption;
import { economize } from "@/utils/economize"
interface Props {
  chartData?: any
  state?: any
}
const props = withDefaults(defineProps<Props>(), {
  chartData: []
})

const createChinaMap = () => {
  echarts.registerMap("china", china as any)
  let mapDom = document.getElementById("map")

  let myChart = echarts.init(mapDom)
  // 地图默认中心
  let defaultCenter = [117.283042, 31.86119]

  // 会员人数地区 Member Region
  let memberRegion = props.chartData

  // 需要高亮的省
  let highlightAreaList = [] as string[]
  console.log()
  memberRegion.forEach((e: any) => {
    if (!!e.name) {
      highlightAreaList.push(economize(e.name))
    }
  })

  let option = {
    myChart: myChart,
    memberRegion: memberRegion,
    highlightAreaList: [...new Set(highlightAreaList)],
    defaultCenter: defaultCenter
  }

  setOption(option)

  // chart大小自适应
  window.addEventListener("resize", () => {
    myChart.resize() // 调用自适应
  })
}
/**
 * option = {
 *  myChart: echarts对象 必须
 *  memberRegion: 会员地区
 *  highlightAreaList： 需要高亮的省
 *  center： 地图初始中心
 * }
 */

const setOption = (option: any) => {
  option.highlightAreaObjList = buildHighlightAreaObjList(option.highlightAreaList)
  option.myChart.setOption({
    tooltip: {
      trigger: "item"
    },
    visualMap: {
      show: false
    },
    geo: {
      // 指定区域设置样式和
      regions: option.highlightAreaObjList,
      center: option.center,
      map: "china",
      silent: false,
      itemStyle: {
        borderColor: "#FFFFFF",
        areaColor: "#E7E7E7",
        borderWidth: 1
        // 虚化程度
        // shadowBlur: 1,
        // shadowColor: "rgba(189,243,249)",
      },
      visualMap: {
        min: 0,
        max: 2, // 最大值对应市标红省的值
        calculable: true,
        inRange: { color: ["#FFF7FA", "#FFC89A"] } // 自定义颜色区间
      },
      // 控制鼠标悬浮上去的效果
      emphasis: {
        // 聚焦后颜色
        disabled: false, // 开启高亮
        label: {
          align: "center",
          color: "#ffffff"
        },
        itemStyle: {
          color: "#ffffff",
          areaColor: "#E56268" // 阴影效果 鼠标移动上去的颜色
        }
      },
      top: "30%",
      left: "center",
      zoom: 1.6 //缩放
      // roam: true, //鼠标可拖动、缩放
    },
    series: [
      {
        symbolSize: function (data: any) {
          return Math.sqrt(data[2]) / 5e2
        },
        emphasis: {
          show: false,
          focus: "item",
          itemStyle: {
            color: "rgb(252, 1, 26)"
          }
        },
        tooltip: {
          formatter: function (params: any) {
            return params.name + " " + params.data.number_of_users + "人"
          }
        },
        type: "scatter",
        coordinateSystem: "geo",
        // symbolSize: 15,
        // symbolRotate: 35,
        label: {
          show: true,
          normal: {
            formatter: function (params: any) {
              return params.name
              // return params.name + " " + params.data.number_of_users + params.data.unit
            },
            position: "right",
            show: true
          }
        },
        data: option.memberRegion
      }
    ]
  })
}
const buildHighlightAreaObjList = (highlightAreaList: any) => {
  let objList = [] as any
  if (Array.isArray(highlightAreaList)) {
    highlightAreaList.forEach((item) => {
      objList.push({
        name: item,
        itemStyle: {
          color: "red",
          areaColor: "#E56268"
        }
      })
    })
  }
  return objList
}

watch(
  () => props.chartData,
  (newValue) => {
    // initEcharts()
    createChinaMap()
  }
)

onMounted(() => {
  // initEcharts()
  createChinaMap()
})
</script>

<template>
  <div class="map" id="map" style="height: 50vh"></div>
</template>

<style scoped lang="less"></style>
@/utils/economize
